<template>
  <div class="nurse">
  <vab-query-form>
    <vab-query-form-left-panel>
      <el-button icon="el-icon-plus" type="primary" @click="handleAdd(0,'')">
        添加护理等级
      </el-button>


    </vab-query-form-left-panel>
    <vab-query-form-right-panel>

      <el-form ref="formInline" :inline="true" :model="formInline" size="mini" class="demo-form-inline" style="padding: 2px 15px">


        <el-select v-model="value1"    placeholder="机构编号" style="padding-top: 5px; "   >
          <el-option
            v-for="item in options"
            :key="item.institutionNumber"

            :label="item.institutionName"
            :value="item.institutionNumber">
          </el-option>
        </el-select>



        <el-form-item>
          <el-button type="primary" @click="search(0,'')">条件查询</el-button>
        </el-form-item>
      </el-form>
    </vab-query-form-right-panel>
    <el-table
      ref="tableSort"

      :data="list"
      style="float: left"
      v-loading="listLoading"

    >

      <el-table-column
        show-overflow-tooltip
        label="等级名称"

        prop="levelName"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="levelCode"
        label="护理编码"

      ></el-table-column>
      <el-table-column label="禁用状态" prop="gender">
        <template slot-scope="scope">
          <span v-if="scope.row.disabled==true"><el-tag type="warning">禁用</el-tag></span>
          <span v-if="scope.row.disabled==false"><el-tag type="success">启用</el-tag></span>
        </template>
      </el-table-column>





      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="180px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text"    @click="handleAdd(scope.row.id,scope.row)">修改 <i class="el-icon-edit"></i></el-button>
          <el-button type="text"    @click="handleInfo(scope.row.id,scope.row)">详情<i class="el-icon-tickets"></i></el-button>


        </template>
      </el-table-column>

    </el-table>
  </vab-query-form>

    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="500px"

    >
      <el-form ref="form" :model="form"  label-width="80px" >
        <el-form-item label="机构名称"  required v-if="!isdisabled">
          <el-select   v-model="value"   placeholder="机构名称" style="padding-top: 5px;width: 350px "  @change="change">
            <el-option
              v-for="item in options"
              :key="item.institutionNumber"

              :label="item.institutionName"
              :value="item.institutionNumber">
            </el-option>

          </el-select>
          <span v-if="isdisabled">
             {{form.institutionName}}
          </span>

        </el-form-item>

        <el-form-item label="护理等级名称"  required label-width="110px">
          <el-input v-model="form.levelName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="评估等级"  >
          <el-select v-model="form.assessmentLevel"    placeholder="评估等级" style="padding-top: 5px;width: 350px  "   >
            <el-option
              v-for="item in assessmentLevels"
              :key="item.value"

              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <div v-if="isdisabled">
        <el-form-item label="状态"   >
          <el-select v-model="form.disabled"    placeholder="状态" style="padding-top: 5px;width: 350px  "   >
            <el-option
              v-for="item in disableds"
              :key="item.value"

              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary"  @click="Saveadd">确 定</el-button>
      </div>


    </el-dialog>

    <el-dialog
      title="护理等级详情"
      :visible.sync="dialogFormVisibles"


    >

      <table style="width: 100%" class="mytable">
        <tr>
          <td class="ttitle" rowspan="3">护理等级详情</td>
          <td class="ttitle">机构编号</td>
          <td>{{listInfo.institutionNumber}}</td>
          <td class="ttitle">护理等级编号</td>
          <td>{{listInfo.levelCode}}</td>
        </tr>
        <tr>
        <td class="ttitle">护理等级名称</td>
        <td>{{listInfo.levelName}}</td>
        <td class="ttitle">禁用状态</td>
        <td v-if="listInfo.disabled==false">启用</td>  <td v-if="listInfo.disabled==true">禁用</td>
        </tr>
        <tr>
          <td class="ttitle" >评估等级</td>
          <td v-if="listInfo.assessmentLevel==0" colspan="3">能力完好</td>
          <td v-if="listInfo.assessmentLevel==1" colspan="3">轻度失能</td>
          <td v-if="listInfo.assessmentLevel==2" colspan="3">中度失能</td>
          <td v-if="listInfo.assessmentLevel==3" colspan="3">重度失能</td>


        </tr>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibles = false">关 闭</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
    import { add } from "@/api/nurse";
    import { search } from "@/api/nurse";
    import { modifyLevelInfo } from "@/api/nurse";
    import { LevelInfo } from "@/api/nurse";


    export default {
        name: "Nurse",

        data() {
            return {
                options: "",
                formInline:{

                },
                id:0,
                isdisabled:false,
                list:[],
                listInfo:{},
                value1:'',
                listLoading:true,
                value: '',
                dialogFormVisibles:false,
                dialogFormVisible:false,
                // listLoading: true,
                form:{
                    institutionNumber:"",
                    levelName:"",
                    assessmentLevel:0,
                    disabled:'',

                },
                assessmentLevels:[{
                    value: 0,
                    label: '能力完好'
                }, {
                    value: 1,
                    label: '轻度失能',

                },
                    {
                        value: 2,
                        label: '中度失能'
                    }, {
                        value: 3,
                        label: '重度失能',

                    },
                ],
                    title:"添加护理等级",
                disableds:[
                    {
                        value: false,
                        label: '启用'
                    },
                    {
                        value: true,
                        label: '禁用'
                    }

                ]

            }




        },

       mounted(){
            console.log(localStorage.getItem("institutionNumber"))
           this.form.institutionNumber=localStorage.getItem("institutionNumber")
           this.value=localStorage.getItem("institutionNumber")
           this.value1=localStorage.getItem("institutionNumber")
        setTimeout(() => {
            this.options= JSON.parse(localStorage.getItem("childinstitutionNumber"));

        },
            1000);
           setTimeout(() => {
               this.search()

               },1000)

    },
        methods: {

            handleAdd(id,data) {

                this.id = id
                console.log(data)



                this.dialogFormVisible=true
                if(this.id>0){
                    this.title="修改护理等级"
                    this.isdisabled = true
                    this.form.disabled = true
                    this.form = {
                        ...data
                    }
                }else {


                    this.title="添加护理等级"
                    this.isdisabled = false
                    this.form.levelName = ""
                    this.form.disabled = false
                    this.form.assessmentLevel = 0
                }
            },
            change(value){
                 this.form.institutionNumber=value
            },

            Saveadd(){
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        if(this.id>0){

                            const {code} = await modifyLevelInfo(this.form);
                            if(code==200){
                                this.$baseMessage("修改成功");
                                this.dialogFormVisible=false;
                                this.search();

                            }else {
                                return false
                            }
                        }else{
                             console.log(this.form)
                            const {code} = await add(this.form);
                            if(code==200){
                                this.$baseMessage("添加成功");
                                this.dialogFormVisible=false;
                                this.search();

                            }else {
                                return false
                            }
                        }


                    }
                });
            },
            handleInfo(id,row){

                console.log(row.levelCode)
                let levelCode=row.levelCode

                this.dialogFormVisibles=true
                LevelInfo({levelCode}).then(res =>{

                    console.log(res)
                    this.listInfo=res.data
                    setTimeout(() => {
                        this.listLoading = false;
                    }, 500);
                })

             },
            search(id,data){
                this.id = id
                this.listLoading = true;

               console.log(localStorage.getItem("institutionNumber"))
                if(this.id==undefined){

                    var institutionNumber= localStorage.getItem("institutionNumber")
                }else {

                    var institutionNumber= this.value1
                }

                search({institutionNumber}).then(res =>{
                    console.log(res.data)
                    this.list=res.data

                    setTimeout(() => {
                        this.listLoading = false;
                    }, 500);
                })
            },


         close(){
             this.dialogFormVisible=false
         }



        }
    }
</script>

<style scoped>
  table
  {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  table td, table th
  {
    border: 1px solid #cad9ea;
    height: 30px;
  }
  table .ttitle
  {
    background-color: #F5FAFA;
    width: 100px;
  }
  table tr:nth-child(odd)
  {
    background: #fff;
  }
</style>
